<template>
	<div class="order-info">
		<el-button type="primary" style='margin:5px 10px;' @click='handleClose'>批量关闭</el-button>
		 <el-table
	    :border='false'
	    :data='orderlist'
	    class='order-info-table'
	    @selection-change="handleSelectionChange"
	    style="width: 952px;margin:10px auto">
				    <el-table-column
			      type="selection"
			      width="55">
			  </el-table-column>
			    <el-table-column
			      label="票种"
			      width="100"
			      style='position:relative'
			      >
			      <template scope="scope">
			      	<div class='order-num-info' style="width:400px;border-bottom:1px solid #ccc;background:#eee">订单号码：{{scope.row.ordernum}}</div>
			    	<div style='margin:40px 0;' class="content-rowspan">
			    		<div v-for="value in scope.row.enrolllist">{{ value.ticketTitle }}</div>
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="价格"
			      width="90">
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    		<div v-for="value in scope.row.enrolllist">{{ value.money }} 元</div>
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="数量"
			      width="90">
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    		<div v-for="value in scope.row.enrolllist">{{ value.number }}</div>
			    </div>
			</template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="订单状态"
			      style='position:relative'
			      width="95">
			      	<template scope='scope'>
			      		<div class='order-num-info' style='background:#eee;width:440px;border-bottom:1px solid #ccc;'>活动名称：{{scope.row.title}}</div>
			      		{{scope.row.status}}
			  		</template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="姓名"
			      width="80">
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	{{scope.row.enrollname}}
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="手机号"
			      width="120">
			      <template scope="scope">
			    	<div style='margin:40px 0;' class="content-rowspan">
			    	{{scope.row.enrollphone}}
			    	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="金额"
			       width="100">
			       <template scope='scope'>
			       	{{scope.row.money}} 元
			       </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="付款方式"
			      style='position:relative'
			       width="120">
			       <template scope='scope'>
			       	<div class='order-num-info' style="background:#eee;width:265px;border-bottom:1px solid #ccc;">下单时间：{{scope.row.orderdate}}</div>
			       微信</template>
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      width="100">
			      <template scope="scope">
			      	<router-link :to="{path:'/activity/list/check_order/'+scope.row.id,query:{activityId:id}}">
		        		<el-button type="text" size="small">查看</el-button>
		        	</router-link>
		        	<el-button type="text" @click="handleCloseOrder(scope.$index, scope.row)" size="small" v-show='scope.row.status=="未通过"||scope.row.status=="待付款"'>关闭</el-button>
		      </template>
		    </el-table-column>
	  </el-table>
	  
	</div>
</template>
<script>
	export default {
		props:['selectDateStart','pageSize','currentPage','orderlist','selectDateEnd','phonenum','status','ordernum','id'],
		data(){
			return {
				checkedlist:[],
				orderIds:''
			}
		},
		methods:{
			handleSelectionChange(val){
				this.checkedlist = val
			},

			handleClose(){
				for (let i = 0; i < this.checkedlist.length; i++) {
					this.orderIds += this.checkedlist[i].id+','
				}
				this.$confirm('确定要批量关闭?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		        	this.$http.post('marketweb/orderback/batchcloseOrder',{
		        		keyAdmin:this.$store.state.keyAdmin,
		        		orderIds:this.orderIds.slice(0,-1)
		        	}).then(response=>{
		        		if(response.body.code==200){
		        			this.$message({
				            type: 'success',
				            message: '关闭成功!'
				          });
		        			this.getOrderData()
		        		}else{
		        			this.$message.error(response.body.msg)
		        		}
		        	},response=>{
		        		this.$message.error('批量操作失败')
		        	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消操作'
		          });          
		        });
			},

			getOrderData(){
				this.$http.post('marketweb/orderback/queryActionOrders',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.id,
					pageNum :this.currentPage,
					pageSize:this.pageSize,
					ordernum:this.ordernum,
					status:this.status,
					orderdateStart:this.selectDateStart,
					orderdateEnd:this.selectDateEnd,
					userphone:this.phonenum
				}).then(response=>{
					if(response.body.code == 200){
						this.orderlist = response.body.orderlist
						for (var i = 0; i < this.orderlist.length; i++) {
							if(this.orderlist[i].status == 0){
								this.orderlist[i].status = '待审核'
							}else if(this.orderlist[i].status == 1){
								this.orderlist[i].status = '未通过'
							}else if(this.orderlist[i].status == 2){
								this.orderlist[i].status = '待付款'
							}else if(this.orderlist[i].status == 3){
								this.orderlist[i].status = '已完成'
							}else if(this.orderlist[i].status == 4){
								this.orderlist[i].status = '已核销'
							}else if(this.orderlist[i].status == 6){
								this.orderlist[i].status = '已取消'
							}
						}
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('请求失败')
				})
			},

			handleCloseOrder(index,row){
				this.$confirm('确定要关闭此订单么?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'info'
	        }).then(() => {
	        	this.$http.post('marketweb/orderback/closeOrder',{
						keyAdmin:this.$store.state.keyAdmin,
						orderId:row.id
					}).then(response=>{
						if(response.body.code == 200){
							 this.$message({
				            type: 'success',
				            message: '关闭成功!'
				          });
							 this.getOrderData()
						}else{
							this.$message.error(response.body.msg)
						}
					},response=>{
						this.$message.error('关闭失败')
					})
				    }).catch(() => {
				      this.$message({
				        type: 'info',
				        message: '已取消操作'
				      });          
				    });
				}
		}
	}
</script>
<style scoped>
	.order-info{
		margin-top:10px;
	}
	.order-info-table{
		margin:10px 0;
	}
	.order-num-info{
		position: absolute;
		left: -55px;
		top: 0;
		width: 210px;
		padding: 5px;
		z-index: 2;
		color: #000;
	}
	.order-info{
		position: relative;
	}
	.check-activity-btn{
		position: absolute;
		right: 20px;
		top: -60px;
	}
	
</style>